<template>
  <t-config-provider :global-config="{ classPrefix: 't' }">
    <div style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);" v-show="showEmpty">
      暂无数据
    </div>

    <t-space direction="vertical" style="width: 100%; text-align: center">

      <t-tabs :default-value="1">
        <t-tab-panel :value="(i+1)" :label="tab.title" v-for="(tab,i) in tabs">

          <div style="margin: 20px" v-show="showLoading">
            <t-loading text="加载中..." size="large"></t-loading>
          </div>

          <div v-if="tab.type==1">
            <p style="margin: 20px">
              <div class="demo-card">
                <t-card v-for="(data,j) in datas[tab.dataKey]" :title="data.orderStatus"
                        :subtitle="'预订时间：'+data.bookingTime"
                        :bordered="true" hover-shadow style="text-align: left;margin-top: 20px">
                  <div style="font-weight: bold">{{ data.address }}</div>
                  <div>{{ '开始时间：'+data.startDateTime }}</div>
                  <div>{{ '结束时间：'+data.endDateTime }}</div>
                  <div>{{ data.userName }}</div>
                  <template #actions>
                    ￥{{ data.price }}
                  </template>
                </t-card>
              </div>
            </p>
          </div>
          <div v-else>
            <p style="margin: 20px; text-align: left">
              <div>酒店：￥{{ price.hotelTotalPrice }}</div>
              <div>飞机：￥{{ price.aircraftTotalPrice }}</div>
              <div>火车：￥{{ price.trainTotalPrice }}</div>
              <div>用车：￥{{ price.vehicleTotalPrice }}</div>
              <div>总计：￥{{ price.totalPrice }}</div>

            </p>
          </div>
        </t-tab-panel>
      </t-tabs>
    </t-space>
  </t-config-provider>
</template>

<script setup>
import {
  AddIcon,
  CloudUploadIcon,
  DiscountIcon,
  CloudDownloadIcon,
} from "tdesign-icons-vue-next";
import Logo from "../assets/svg/assets-t-logo.svg?component";
import {computed, reactive, ref} from "vue";
import {MessagePlugin} from "tdesign-vue-next";


console.log('domain', import.meta.env.MODE)
console.log('domain', import.meta.env.VITE_DOMAIN)


// interface costItem {
//   title: string,
//   type?: number,
//   content?: any
//   orderStatus?: any,
//   bookingTime?: string,
//   price?: number,
//   address?: string,
//   userName?: string
// }

// const tabs = reactive([{
//   title: '酒店',
//   type: 1,
//   orderStatus: '已成交',
//   bookingTime: '2023-09-01 12:11:11',
//   price: 12.17,
//   address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
//   userName: '张三'
//
// }, {
//   title: '机票',
//   type: 1,
//   orderStatus: '已成交',
//   bookingTime: '2023-09-01 12:11:11',
//   price: 12.17,
//   address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
//   userName: '张三'
// }, {
//   title: '火车',
//   type: 1,
//   orderStatus: '已成交',
//   bookingTime: '2023-09-01 12:11:11',
//   price: 12.17,
//   address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
//   userName: '张三'
// }, {
//   title: '用车',
//   type: 1,
//   orders:[
//     {
//       orderStatus: '已成交',
//       bookingTime: '2023-09-01 12:11:11',
//       price: 12.17,
//       address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
//       userName: '张三'
//     },
//     {
//       orderStatus: '已成交',
//       bookingTime: '2023-09-01 12:11:11',
//       price: 12.17,
//       address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
//       userName: '张三'
//     },
//   ]
// }, {
//   title: '合计',
//   type: 2,
//   content: {
//     hotelPrice: 100,
//     aircraftPrice: 200,
//     trainPrice: 300,
//     vehiclePrice: 400,
//     totalPrice: computed(() => {
//       let datas = tabs[4].content;
//       // datas.find(data=>data instanceof number)
//       //     .forEach(console.log)
//       // console.log(datas)
//       let total = 0
//       for (const datasKey in datas) {
//         if (datasKey != 'totalPrice') {
//           total += datas[datasKey];
//         }
//       }
//       return total
//     }),
//   }
// }
// ])

const showLoading = ref(true)
const showEmpty = ref(false)

const tabs = reactive([
  {
    title: '合计',
    type: 2
  }, {
    title: '酒店',
    type: 1,
    dataKey: 'hotel'

  }, {
    title: '机票',
    type: 1,
    dataKey: 'aircraft'
  }, {
    title: '火车',
    type: 1,
    dataKey: 'train'
  }, {
    title: '用车',
    type: 1,
    dataKey: 'vehicle'
  }
])

// const datas=reactive({});
const datas = ref({
  hotel: [
    {
      orderStatus: '已成交',
      bookingTime: '2023-09-01 12:11:11',
      price: 12.17,
      address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
      userName: '张三'
    }
  ],
  aircraft: [
    {
      orderStatus: '已成交',
      bookingTime: '2023-09-01 12:11:11',
      price: 12.17,
      address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
      userName: '张三'
    }
  ],
  train: [
    {
      orderStatus: '已成交',
      bookingTime: '2023-09-01 12:11:11',
      price: 12.17,
      address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
      userName: '张三'
    }
  ],
  vehicle: [
    {
      orderStatus: '已成交',
      bookingTime: '2023-09-01 12:11:11',
      price: 12.17,
      address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
      userName: '张三'
    },
    {
      orderStatus: '已成交',
      bookingTime: '2023-09-01 12:11:11',
      price: 12.17,
      address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
      userName: '张三'
    },
    {
      orderStatus: '已成交',
      bookingTime: '2023-09-01 12:11:11',
      price: 12.17,
      address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
      userName: '张三'
    },
    {
      orderStatus: '已成交',
      bookingTime: '2023-09-01 12:11:11',
      price: 24.34,
      address: '地下停车场-G区-网约车上车点/ 汉口城市广场五期-北门(经济型)',
      userName: '张三'
    }
  ]
})

datas.value = {}

const price = computed(() => {
  const computedSum = (order) => {
    return !order ? 0 : order.reduce((sum, order) => Number((sum + order.price).toFixed(2)), 0)
  }
  console.log(datas.value.hotel)
  console.log(datas.value.aircraft)
  console.log(datas.value.train)
  console.log(datas.value.vehicle)
  let priceTmp = {
    hotelTotalPrice: computedSum(datas.value.hotel),
    aircraftTotalPrice: computedSum(datas.value.aircraft),
    trainTotalPrice: computedSum(datas.value.train),
    vehicleTotalPrice: computedSum(datas.value.vehicle)
  }
  const totalPrice = computed(() => {
    let total = 0
    for (let priceTmpKey in priceTmp) {

      total += priceTmp[priceTmpKey];
      console.log('total', total)
      total = Number(total.toFixed(2))
    }
    return total

  })
  priceTmp.totalPrice = totalPrice.value
  return priceTmp
})
console.log(price)


setTimeout(() => {
  const domain = import.meta.env.VITE_DOMAIN
  console.log(window.location.search)
  let urlSearchParams = new URLSearchParams(window.location.search);
  console.log(urlSearchParams)
  let url = domain + '/travel/api/getCostInfo?' + urlSearchParams.toString();
  // console.log(url)
  fetch(url)
      .then((response) => {
        console.log("response", response)
        return response.json()
      })
      .then(result => {
        console.log(result)
        showLoading.value = false;
        if (!result.code) {
          datas.value = result.data;
        } else {
          MessagePlugin.error({
            content: result.msg,
            duration: 5000,
            // 层级控制：非当前场景自由控制开关的关键代码，仅用于测试 API 是否运行正常
            zIndex: 1001,
            placement: "center"
          })
          showEmpty.value = true
        }
      })
      .catch(error => {
        showLoading.value = false;
        MessagePlugin.error({
          content: "服务器异常，请稍后重试",
          duration: 5000,
          // 层级控制：非当前场景自由控制开关的关键代码，仅用于测试 API 是否运行正常
          zIndex: 1001,
          placement: "center"
        })
      })
}, 1)
</script>
<style>
body {
//background-color: lightgray;
}
</style>
<style>
.t-card__title {
  color: #276CDF;
}
</style>
